import React, { useState } from 'react';
import styled from 'styled-components';
import { Outlet } from 'react-router-dom';
import AdminSidebar from '../components/admin/AdminSidebar';
import AdminHeader from '../components/admin/AdminHeader';

const LayoutContainer = styled.div`
  display: flex;
  min-height: 100vh;
  background-color: #f0f2f5;
  position: relative;
  width: 100%;
  box-sizing: border-box;
`;

const SidebarContainer = styled.div`
  width: 200px; /* 侧边栏宽度 */
  min-height: 100vh;
  background-color: #1f2937;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  transition: width 0.3s ease;
  overflow: hidden;
  
  ${({ collapsed }) => collapsed && `
    width: 64px;
  `};
`;

// 主要内容区域 - 应该在去掉侧边栏的剩余区域内居中
const MainContent = styled.div`
  /* 使用margin-left留出侧边栏空间，移除width计算让MainContent自然占据剩余空间 */
  margin-left: 200px; 
  transition: margin-left 0.3s ease;
  box-sizing: border-box;
  min-height: 100vh;
  
  ${({ sidebarCollapsed }) => sidebarCollapsed && `
    margin-left: 64px;
  `};
`;

const ContentWrapper = styled.div`
  /* 调整内边距，确保内容在MainContent内部居中显示 */
  padding: 20px;
  min-height: calc(100vh - 64px);
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 1400px; /* 设置最大宽度，避免在大屏幕上过宽 */
`;

const AdminLayout = () => {
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);

  const toggleSidebar = () => {
    setSidebarCollapsed(!sidebarCollapsed);
  };

  return (
    <LayoutContainer>
      <SidebarContainer collapsed={sidebarCollapsed}>
        <AdminSidebar collapsed={sidebarCollapsed} />
      </SidebarContainer>
      <MainContent sidebarCollapsed={sidebarCollapsed}>
        <AdminHeader toggleSidebar={toggleSidebar} sidebarCollapsed={sidebarCollapsed} />
        <ContentWrapper>
          <Outlet />
        </ContentWrapper>
      </MainContent>
    </LayoutContainer>
  );
};

export default AdminLayout;